<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/static/tmpl/transDetailTmpl.jsp"%>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<title>停车记录</title>
<link rel="stylesheet" href="${ctx}/static/plug/frozenui-1.3.0/css/frozen.css" media="all">
<link rel="stylesheet" href="${ctx}/static/css/user/register.css" media="all">
<style type="text/css">
.content {
	padding-top: 10px;
	padding-left: 20px;
	padding-right: 20px
}

.div-content {
	width: 100%;
	margin-top: 10px;
	padding-bottom: 5px;
	padding-top: 10px;
	background-color: #469fe3;
	color: white;
	border-radius: 3px;
}

.unpay-content {
	width: 100%;
	margin-top: 10px;
	padding-bottom: 5px;
	padding-top: 10px;
	background-color: #d32d26;
	color: white;
	border-radius: 3px;
}

.div-noUnpay {
	margin: 0px auto;
	text-align: center;
	color: #898989;
	padding-top: 100px
}

.ui-border-tb {
	border-bottom: none !important;
}
</style>
</head>
<body>
	<section class="ui-container">
		<div class="ui-tab" id="tab1">
			<ul class="ui-tab-content" style="width: 100%">
				<li>
					<ul class="ui-list ui-list-pure ui-border-tb"  id="deduct_detail" nowPage="1" type="2" tmpl="deduct_tmpl">
					<li class="ui-border-t">提示：如果停车扣款发生错误，点击每条停车记录可以进行申诉</li>
						<c:if test="${delMoneyLogList != null &&  fn:length(delMoneyLogList) > 0 }">
							<c:forEach var="delMoneyLog" items="${delMoneyLogList}">
								<li class="ui-border-t"  onclick="toAppeal(${delMoneyLog.id})">
									<div class="ui-row-flex" style="font-size: 17px;">
										<div class="ui-col ui-col-2">
											<span>${delMoneyLog.parkLotName}</span>
										</div>
										<div class="ui-col" style="text-align: right; padding-right: 10px">￥<fmt:formatNumber type="number"
												value="${delMoneyLog.beforeMoney / 10 }" pattern="0.00"
												maxFractionDigits="2" />
										</div>
									</div>
									<div class="ui-row-flex" style="margin-top: 3px">
										<div class="ui-col ui-col-2" >
											<h5 class="ui-txt-info">${delMoneyLog.carNo}</h5>
										</div>
										<div class="ui-col" style="text-align: right; padding-right: 10px">
											<h5 class="ui-txt-info">
												停车券:￥<fmt:formatNumber type="number" value="${delMoneyLog.afterCoupon / 10}" pattern="0.00" maxFractionDigits="2" />
											</h5>
										</div>
									</div>
									<div class="ui-row-flex">
										<div class="ui-col ui-col-2">
											<h5 class="ui-txt-info">
												${delMoneyLog.outTime}
											</h5>
										</div>
										<div class="ui-col" style="text-align: right; padding-right: 10px">
											<h5 class="ui-txt-info">
												总额:<span>￥<fmt:formatNumber type="number" value="${delMoneyLog.afterMoney/10 }" pattern="0.00"
														maxFractionDigits="2" /></span>
											</h5>
										</div>
									</div>
								</li>
							</c:forEach>
						</c:if>
						
						<c:if test="${delMoneyLogList == null ||  fn:length(delMoneyLogList) == 0 }">
							<div class="ui-flex ui-flex-ver ui-flex-pack-center ui-flex-align-start"
								style="height: 450; overflow: auto; background-color: #f8f8f8">
								<div id="noUnpayDiv" class="div-noUnpay">
									<div>
										<img alt="" src="${ctx}/static/image/recharge/no.png" width="150px">
									</div>
								</div>
							</div>
						</c:if>
					</ul>
				</li>
			</ul>
		</div>
	</section>
</body>
<script src="${ctx}/static/plug/frozenui-1.3.0/lib/zepto.min.js"></script>
<script src="${ctx}/static/plug/frozenui-1.3.0/js/frozen.js"></script>
<script>
var paramObj;
	$(function(){
		paramObj = {
			"transDetailDataParam":"${transDetailDataParam}",
			"toAppealParam":"${toAppeal}"
		};
		
		var isLoading = false;
		function scrollFn(){
			var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight);
			//视窗的高度
			var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
			//隐藏的高度
			var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
			if(pageHeight - viewportHeight - scrollHeight < 10 ){//如果满足触发条件，执行
				if(isLoading) {
					return;
				}
				if($("#deduct_detail").find(".nodata-div").length > 0){
					isLoading = false;
					return;
				}
				isLoading = true;
				var type=$("#deduct_detail").attr("type");
				var page=parseInt($("#deduct_detail").attr("nowPage"))+1;
				var param = {"params":paramObj.transDetailDataParam,"page":page,"type":type};
				$.post("${action}", param, function(data) {
					removeLoadingDiv();
					if (data.result) {
						var listData = data.data;
						if (listData == null || listData.length == 0) {
							$("#deduct_detail" ).append(getNoMoreDataDiv());
						} else {
							$("#deduct_detail").attr("nowPage", page);
							var tplId = $("#deduct_detail" ).attr("tmpl");
							var tpl = $("#"+tplId).html();
							$("#deduct_detail" ).append(template(tpl, {list: listData}));
							
						}
					} else {
					}
					isLoading = false;
				});
			}
		}
		$(window).bind("scroll", scrollFn);
	})
	
	function toAppeal(pId) {
			window.location.href = "${action}?params=" + paramObj.toAppealParam+"&pId="+pId;
		}
</script>
</html>
